<template>
	<div class="ws ctx">
		<tithead>微水系统</tithead>
		<div class="view">
			<div style="flex: 1;" class="left">
				<div class="wslefteach">温　度 : 39 ℃ </div>
				<div class="wslefteach"> 含水量 : 82 ul/L </div>
				<div class="wslefteach">系统状态 : 正常</div>
			</div>
			<div id="wsecharts" style="flex: 1.7;position: relative;">
				<div class="textbox">
					<p>压力</p>
					<p style="font-size: 30rem;color: #3099FF;">49</p>
					<p style="color: skyblue;">Mpa</p>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'ws',
		data() {
			return {}
		},
		mounted() {
			let rs = this.ces(document.getElementById('wsecharts'))
			let option = {
				aria: {
					enabled: true,
					decal: {
						show: true
					}
				},
				series: [{
					type: 'gauge',
					center: ["50%", "70%"], //圆环位置
					startAngle: 180,
					endAngle: 0,
					min: 0,
					max: 100,
					splitNumber: 4,
					radius: "100%", //半径
					axisLine: {
						lineStyle: {
							width: 10,
							color: [
								[0.65, '#3EE09A'],
								[0.80, '#FCFF07'],
								[1, '#fd666d']
							]
						}
					},
					pointer: {
						show: false, //隐藏指针
						itemStyle: {
							color: 'auto'
						}
					},
					axisTick: {
						show: false, //隐藏刻度
					},
					splitLine: {
						show: false, //隐藏分割线
					},
					axisLabel: {
						color: '#fff',
						distance: -40,
						fontSize: 12
					},
					detail: {
						show: false,
						valueAnimation: true,
						formatter: '{value}',
						color: 'auto'
					},
					data: [{
						value: 70
					}]
				}]
			};
			rs.setOption(option);
		}
	}
</script>
<style lang='scss'>
	.ws {
		.view {
			display: flex;
			height: 140rem;
		}

		.textbox {
			width: 40rem;
			position: absolute;
			bottom: 5rem;
			left: calc(50% - 20rem);

			p {
				font-size: 12rem;
				margin: 5rem auto;
			}
		}

		.left {
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.wslefteach {
				background: url(../../assets/day-bg.png);
				height: 25rem;
				line-height: 25rem;
				font-size: 12rem;
			}
		}
	}
</style>
